<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>
    <%--<script type="text/javascript" src="${ctx}/appjs/elec/elecGun.js"></script>--%>
</head>

<script type="text/javascript">
    $('#topLink', window.parent.document).html(function (i, origText) {
        return'<ol class="breadcrumb">' +
            '<li class="breadcrumb-item">' +
            '<a href="">主页</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a>订单管理</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<strong>评价详情</strong>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a href="javascript:window.history.back()"><i class="fa fa-times"></i> 返回</a>' +
            '</li>' +
            '</ol>';
    });

</script>
<style >
    .table tbody tr th {

        display: table-cell;

        vertical-align: middle;

        text-align: center;

        padding: 10px;


    }

</style>

<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="columns pull-left">
                        <h5 class="font-bold">评价详情</h5>
                    </div>
                    <div class="ibox-tools">
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                    <form class="form-horizontal m-t" >
                        <input type="hidden" value="${info.stationStar}" id="stationStar"/>
                        <input type="hidden" value="${info.serviceStar}" id="serviceStar"/>
                        <input type="hidden" value="${info.orderId}" id="orderId"/>
                        <div class="form-group row" class="col-sm-12">
                            <label class="col-sm-1 col-form-label text-right">用户名称</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control"   readonly
                                       value="${info.nickname}">
                            </div>
                            <label class="col-sm-1 col-form-label text-right">订单编号</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control"  readonly
                                       value="${info.orderId}">
                            </div>
                            <label class="col-sm-1 col-form-label text-right">站点名称</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control"  readonly
                                       value="${stationInfo.stationName}">
                            </div>
                        </div>
                        <div class="form-group row col-sm-12" style="overflow-x: auto;overflow-y: auto;width: 1260px;" >
                            <table id="orderTableId" lay-filter="test"></table>
                        </div>
                        <div class="form-group row" class="col-sm-12">
                            <label class="col-sm-1 col-form-label text-right">评论图片</label>
                            <div class="col-sm-11">
                                <div>
                                    <c:choose>
                                        <c:when test="${info.evaluateUrl1 !=null && info.evaluateUrl1 != ''}">
                                            <img id="evaluateUrl1" src="${info.evaluateUrl1}" width="155px" height="120px">
                                        </c:when>
                                    </c:choose>
                                    <c:choose>
                                        <c:when test="${info.evaluateUrl2 !=null && info.evaluateUrl2 != ''}">
                                            <img id="evaluateUrl2" src="${info.evaluateUrl2}" width="155px" height="120px">
                                        </c:when>
                                    </c:choose>
                                    <c:choose>
                                        <c:when test="${info.evaluateUrl3 !=null && info.evaluateUrl3 != ''}">
                                            <img id="evaluateUrl3" src="${info.evaluateUrl3}" width="155px" height="120px">
                                        </c:when>
                                    </c:choose>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row" class="col-sm-12">
                            <label class="col-sm-1 col-form-label text-right">评论内容</label>
                            <div class="col-sm-11">
                               <textarea class="form-control"  readonly>${info.evaluate}</textarea>
                            </div>
                        </div>

                        <div class="form-group row" class="col-sm-12">
                            <label class="col-sm-1 col-form-label text-right">站点评分</label>
                            <div id="stationStarId"></div>
                        </div>
                        <div class="form-group row" class="col-sm-12">
                            <label class="col-sm-1 col-form-label text-right">服务评分</label>
                            <div id="serviceStarId"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var stationStar = 0;
    var serviceStar = 0;
    var oId = 0;
    var prefix = ${ctx} + "/evaluate";
    $(function () {
        var stationSorce = $("#stationStar").val();
        if (stationSorce!=''&&stationSorce!=undefined){
            stationStar = stationSorce/20;
        }
        var serviceSorce = $("#serviceStar").val();
        if (serviceSorce!=''&&serviceSorce!=undefined){
            serviceStar = serviceSorce/20;
        }
        var orderId = $("#orderId").val();
        if (orderId!=''&&orderId!=undefined){
            oId = orderId;
        }
    });
    layui.use(['rate','table'], function() {
        var  table = layui.table;
        var  rate = layui.rate;
        //渲染充电站评分
         rate.render({
            elem: '#stationStarId',  //绑定元素
            length:5,
            value:stationStar,
            readonly:true
        });
        //渲染服务评分
         rate.render({
            elem: '#serviceStarId',  //绑定元素
            length:5,
            value:serviceStar,
            readonly:true
        });

         table.render({
            elem: '#orderTableId',  // 指向页面组件id
            where: { orderId: oId },  // 传递参数
            url: '/evaluate/ByIdForOrder/',  // 异步获取数据
            cellMinWidth: 95,
            page: false,  //
             parseData:function(res){
                //debugger
                 //let resData = res.data;
                 return {
                     "code": 0,
                     "msg": "",
                     "count": res.length,//解析数据总条数
                     "data": res //解析数据列表
                 }
             },
            cols: [[
                { field: "outOrderNum", title: '订单编码', width: 300,  align: "center" },
                { field: 'nickname', title: '用户名称', width: 90, align: "center" },
                { field: 'mobile', title: '手机号', width: 150, align: "center" },
                { field: 'carNum', title: '车牌', width: 120, align: "center" },
                { field: 'pileNo', title: '电桩编号', width: 200, align: "center" },
                { field: 'accountType', title: '充电方式', width: 90, align: "center",
                    templet: function(row) {
                        if (row.accountType == '0') {
                            return '<span >个人充电</span>'
                        } else if (row.accountType == '1') {
                            return '<span >企业充电</span>'
                        } else if (row.accountType == '2') {
                            return '<span >共享充电</span>'
                        }
                    }
                },
                { field: 'startTime', title: '开始时间', width: 180, align: "center" },
                { field: 'endTime', title: '结束时间', width: 180, align: "center" },
                { field: 'timeStr', title: '充电时长', width: 150, align: "center" },
                { field: 'totalPower', title: '电量（度）', width: 150, align: "center" },
                { field: 'totalElecMoney', title: '电费（元）', width: 150, align: "center" },
                { field: 'totalSeviceMoney', title: '服务费（元)', width: 150, align: "center" },
                { field: 'discountAmount', title: '优惠金额', width: 90, align: "center" },
                { field: 'totalMoney', title: '订单金额', width: 90, align: "center" },
                { field: 'payAmount', title: '实付金额', width: 90, align: "center" },
                { field: '', title: '优惠方式', width: 90, align: "center" },
                { field: 'accountType', title: '支付方式', width: 90, align: "center",
                    templet: function(row) {
                        if (row.accountType == '0') {
                            return '<span >个人钱包</span>'
                        } else if (row.accountType == '1') {
                            return '<span >企业钱包</span>'
                        } else if (row.accountType == '2') {
                            return '<span >共享余额</span>'
                        }
                    }
                },
                { field: 'stationName', title: '充电站点', width: 180, align: "center" },
                { field: 'status', title: '订单状态', width: 90, align: "center",
                    templet: function(row) {
                        if (row.status == '0') {
                            return '<span >未充电</span>'
                        } else if (row.status == '1') {
                            return '<span >充电中</span>'
                        } else if (row.status == '2') {
                            return '<span >已结束充电</span>'
                        } else if (row.status == '3') {
                            return '<span >充电结算中</span>'
                        } else if(row.status == '4'){
                            return '<span >占位费结算</span>'
                        } else if(row.status == '5'){
                            return '<span >占位中</span>'
                        }
                    }},
                { field: 'payTime', title: '支付时间', width: 180, align: "center" },
                { field: 'createdTime', title: '创建时间', width: 180, align: "center" }
            ]]
        });
    });
    <%--<td>${orderInfo.orderNum}</td>--%>
    <%--<td>${orderInfo.nickname}</td>--%>
</script>
</body>
</html>
